<template>
  <view class="container">
	  <view class="header">
		<view class="header-return" v-if="!isfocus" @click="returnclick()"></view>
		<view class="header-cancel" v-if="isfocus" @click="cancel()">取消</view>
		<view class="header-complete" v-if="isfocus" @click="complete()">完成</view>
		<view class="header-title">昵称修改</view>
	  </view>
    <view class="example">
	  <uni-easyinput 
		v-model="user.nickName" 
		placeholder="请输入昵称"
		@focus="inputfocus()"
		@blur="inputblur()"
	  />
    </view>
  </view>
</template>

<script>
  import { getUserProfile } from "@/api/system/user"
  import { updateUserProfile } from "@/api/system/user"

  export default {
    data() {
      return {
        user: {
          nickName: "",
        },
		nickName: '',
		isfocus: false,
      }
    },
	watch: {
		user(newVal) {
			console.log("newVal",newVal)
		}
	},
    onLoad() {
      this.getUser()
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
		inputfocus(){
			this.isfocus = true
		},
		inputblur(){
			
		},
		cancel(){
			this.isfocus = false
			this.user.nickName = this.nickName	
		},
		complete(){
			this.isfocus = false
			if(!this.user.nickName){
				this.user.nickName = this.nickName
				this.$modal.msgError("昵称不能为空")
			}else{
				this.submit()
			}
		},
		returnclick(){
			this.$router.push('/pages/mine/personal')
		},
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data
		  this.nickName = this.user.nickName
        })
      },
      submit() {
		  let data = {"nickName":this.user.nickName}
		  updateUserProfile(data).then(response => {
			this.$modal.msgSuccess("修改成功")
			this.$store.state.user.refresh=!this.$store.state.user.refresh
		  })
      }
    }
  }
</script>

<style lang="scss">
  page {
    // background-color: #ffffff;
  }
  .container{
	  // height: 100vh;
  }
  .header{
  	width: 100vw;
  	height: 12.5vw;
  	background: #ffffff;
  	border: 1px solid #F6F7F8;
  	display: grid;
  	justify-items: center;
  	align-items: center;
  	font-size: 5vw;
  	/* grid-template-columns: 1fr; */
  	/* grid-template-rows: 1fr 1fr; */
  }
  .header-title{
  	font-size: 5vw;
  }
  .header-return{
  	position: absolute;
  	width: 5vw;
  	height: 5vw;
  	left: 5vw;
  	top: 3.5vw;
  	background: url(../../static/index/return.svg);
  	background-size: 100% 100%;
  	cursor: pointer;
  }
  .header-cancel{
  	position: absolute;
	width: 12vw;
	height: 6vw;
  	left: 5vw;
  	top: 3.5vw;
	font-size: 4vw;
  	color: #B3B5B9;
  	cursor: pointer;
	display: grid;
	justify-items: center;
	align-items: center;
  }
  .header-complete{
  	position: absolute;
	width: 12vw;
	height: 6vw;
  	right: 5vw;
  	top: 3.5vw;
	font-size: 4vw;
	color: #1890FF;
  	cursor: pointer;
	display: grid;
	justify-items: center;
	align-items: center;
	border-radius: 1vw;
  }
  .complete2{
	  color: #ffffff;
	  background: rgb(231, 232, 237);
  }
  .shadow{
  	box-shadow: 0px 0px 5vw rgba(0, 0, 0, 0.08);
  }
  
  .example {
	margin: 5vw 0 0 0;
    padding: 3vw 5vw;
    background-color: #fff;
  }
  .example ::v-deep .is-input-border{
	  border: none;
  }
</style>
